<template>
  <a v-if="to.path && to.path[0] !== '/'" :href="to.path" :target="target">
    <slot></slot>
  </a>
  <router-link v-else v-bind="vProps">
    <slot></slot>
  </router-link>
</template>

<script>
export default {
  name:"XRouterLink",
  components: { },
  props:{
    to:{
      type:Object,
      default :{path:'/'},
      require:true,
    },
    target:{
      type:String,
      default :''
    },
  },
  computed:{
     vProps() {
        // https://cn.vuejs.org/v2/api/#vm-attrs
        // 包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。
        // 当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。
        return {...this.$props, ...this.$attrs}
  }
  }
}
</script>

<style lang="less" scoped>
  a{
    text-decoration: none;
    color:#000
  }
  a:active{
    color:#000
  }
</style>